<!-- src/components/ArticleModal.vue -->
<template>
  <div v-if="visible" class="modal-mask">
    <div class="modal-container">
      <!-- 弹窗头部 -->
      <div class="modal-header">
        <h2>事件文章</h2>
      </div>

      <!-- 文章表格 -->
      <div class="article-table">
        <table>
          <thead>
            <tr>
              <th>作者</th>
              <th>平台</th>
              <th>情感强度</th>
              <th>情感分类</th>
              <th>点赞数</th>
              <th>评论数</th>
              <th>转发数</th>
              <th>原文链接</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="articles.length === 0" class="empty-row"><td></td><td></td><td></td><td></td><td>空</td><td></td><td></td><td></td><td></td></tr >
            <tr v-for="article in articles" :key="article.id">
              <td>{{ article.author }}</td>
              <td>{{ article.platform }}</td>
              <td :class="sentimentClass(article.sentiment)">
                {{ article.intensity.toFixed(2) }}
              </td>
              <td>
                <span :class="sentimentTagClass(article.sentiment)">
                  {{ article.sentiment }}
                </span>
              </td>
              <td>{{ article.like }}</td>
              <td>{{ article.comments }}</td>
              <td>{{ article.share }}</td>
              <td>
                <a :href="article.link" target="_blank" class="article-link">
                  查看原文
                </a>
              </td>
              <td>{{ formatDate(article.time) }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <button class="back-btn" @click="close">返回</button>
      </div>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: Boolean,
  articles: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close'])

// 情感样式处理
const sentimentClass = (sentiment) => ({
  'sentiment-intensity': true,
  positive: sentiment === '积极',
  neutral: sentiment === '中性',
  negative: sentiment === '消极'
})

const sentimentTagClass = (sentiment) => ({
  'sentiment-tag': true,
  'tag-positive': sentiment === '积极',
  'tag-neutral': sentiment === '中性',
  'tag-negative': sentiment === '消极'
})

// 时间格式化
const formatDate = (dateStr) => {
  return dateStr.replace(/\//g, '-')
}

const close = () => emit('close')
</script>

<style scoped>
/* 复用基础弹窗样式 */
.modal-mask {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty-row{
  text-align: center;
}
.modal-container {
  width: 90%;
  max-width: 1200px;
  background: #1b263b;
  border-radius: 8px;
  padding: 24px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.article-table {
  flex: 1;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

th,
td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

th {
  background: #1b263b;
  position: sticky;
  top: 0;
}

.article-link {
  color: #1890ff;
  text-decoration: none;
}

.article-link:hover {
  text-decoration: underline;
}

/* 情感样式复用 */
.sentiment-intensity.positive {
  color: #389e0d;
}

.sentiment-intensity.neutral {
  color: #d48806;
}

.sentiment-intensity.negative {
  color: #cf1322;
}

.sentiment-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.tag-positive {
  background: #70f495;
}

.tag-neutral {
  background: #f8de5f;
}

.tag-negative {
  background: #f15e54;
}

.back-btn {
  margin-top: 20px;
  padding: 8px 24px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>